<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Graycat game</title>
    <!--  LuLuUI组件库 完整css引入  -->
    <link rel="stylesheet" href="https://qidian.gtimg.com/lulu/edge/css/common/ui.css">
    <!--  LuLuUI组件库 完整js引入  -->
    <script type="module" src="https://qidian.gtimg.com/lulu/edge/js/common/all.js"></script>
    <link rel="stylesheet" type="text/css" href="css/game.css"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <script src="css/font_1079500_ibhr9p052qn.js"></script>

</head>
<body>
    <div class="container">
        <div class="header"><b>xxxName</b></div>

        <div class="main">
            <div class="box-tips-area">
                关键词：xxx
                <span> ddd </span>
                <span> ddd </span>
            </div>
            <div class="canvas">
                <ol class="colors">
                    <li id="black" class="black"></li>
                    <li id="red" class="red"></li>
                    <li id="orange" class="orange"></li>
                    <li id="green" class="green"></li>
                    <li id="blue" class="blue"></li>
                </ol>
                <canvas id="canvas"></canvas>
                <div id="actions" class="actions">
                    <svg id="brush" class="icon active">
                        <use xlink:href="#icon-pencil"></use>
                    </svg>
                    <svg id="eraser" class="icon">
                        <use xlink:href="#icon-xiangpica2"></use>
                    </svg>
                    <svg id="save" class="icon">
                        <use xlink:href="#icon-xiazai"></use>
                    </svg>
                    <svg id="clear" class="icon">
                        <use xlink:href="#icon-delete"></use>
                    </svg>
                </div>
            </div>
        </div>

        <div class="footer">
            <!--     聊天区域       -->
            <div id="box-chat-area" class="box-chat-area">
                <div class="box-chat-message">Gray:xxsimpe test.</div>
                <div class="box-chat-message-right">Gray:xxsimpe test.</div>
            </div>
            <!--    输入框   -->
            <div class="box-input">
                <input id="text-msg" class="ui-input" width="20em" >
                <button class="ui-button" onclick="showMessageInnerHtml()">发送</button>
            </div>
        </div>

    </div>
</body>
<script>
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    //画板控制开关
    let painting = false;
    //第一个点坐标
    let startPoint = {x: undefined, y: undefined};
    //橡皮擦
    let EraserEnabled = false;

    initCanvas();

    // 画板实现
    function initCanvas(  ){
        //特性检测
        if (document.body.ontouchstart !== undefined) {
            //触屏设备
            initMobileCanvasWidth();
            canvas.ontouchstart = function (e) {
                //[0]表示touch第一个触碰点
                let x = e.touches[0].clientX;
                let y = e.touches[0].clientY;

                let x2 = e.touches[0].clientX;
                let y2 = e.touches[0].clientY;

                let x1 = e.touches[0].pageX - canvas.offsetLeft;
                let y1 = e.touches[0].pageY - canvas.offsetTop;

                // let vertex = document.getElementById('canvas').getBoundingClientRect();
                // let x = e.originalEvent.changedTouches[0].clientX-vertex.left;
                // let y = e.originalEvent.changedTouches[0].clientY-vertex.top;

                painting = true;
                if (EraserEnabled) {
                    // ctx.clearRect(x - 20, y - 20, 40, 40)
                    ctx.clearRect(x - 15, y - 15, 30, 30)
                }
                startPoint = {x: x1, y: y1};
                console.log("点击画布：坐标：" + x1 + " " + y1);
            };
            canvas.ontouchmove = function (e) {
                let x = e.touches[0].clientX;
                let y = e.touches[0].clientY;

                let x1 = e.touches[0].pageX - canvas.offsetLeft;
                let y1 = e.touches[0].pageY - canvas.offsetTop;

                let newPoint = {x: x1, y: y1};
                if (painting) {
                    if (EraserEnabled) {
                        ctx.clearRect(x - 15, y - 15, 30, 30)
                    } else {
                        drawLine(startPoint.x, startPoint.y, newPoint.x, newPoint.y);
                    }
                    startPoint = newPoint;
                }
            };
            canvas.ontouchend = function () {
                painting = false;
            };
        }
        else{
            //非触屏设备
            wh();
            // 按下鼠标(mouse)
            //鼠标点击事件（onmousedown）
            canvas.onmousedown = function (e) {
                let x = e.offsetX;
                let y = e.offsetY;
                painting = true;
                if (EraserEnabled) {
                    ctx.clearRect(x - 15, y - 15, 30, 30)
                }
                startPoint = {x: x, y: y};
                // console.log("点击画布：坐标：" + x + " " + y);
            };
            //    滑动鼠标
            canvas.onmousemove = function (e) {
                let x = e.offsetX;
                let y = e.offsetY;
                let newPoint = {x: x, y: y};
                if (painting) {
                    if (EraserEnabled) {
                        ctx.clearRect(x - 15, y - 15, 30, 30)
                    } else {
                        drawLine(startPoint.x, startPoint.y, newPoint.x, newPoint.y);
                    }
                    startPoint = newPoint;
                }
            };
            //    松开鼠标
            canvas.onmouseup = function () {
                painting = false;
            };
        }
    }

    /*****工具函数*****/
    //初始化移动端画布大小
    function initMobileCanvasWidth(){
        let pageWidth = document.documentElement.clientWidth * 0.98 ;
        let pageHeight = document.documentElement.clientHeight * 0.51;
        console.log("画布大小：" + pageWidth + "," + pageHeight);
        canvas.width = pageWidth;
        canvas.height = pageHeight;
    }

    //点与点之间连接
    function drawLine(xStart, yStart, xEnd, yEnd) {
        // console.log("连线坐标："+"(" + xStart + "," + yStart + ")");
        //开始绘制路径
        ctx.beginPath();
        //线宽
        ctx.lineWidth = 2;
        //起始位置
        ctx.moveTo(xStart, yStart);
        //停止位置
        ctx.lineTo(xEnd, yEnd);
        //描绘线路
        ctx.stroke();
        //结束绘制
        ctx.closePath();
    }

    //    canvas与屏幕宽高一致
    function wh() {
        let pageWidth = document.documentElement.clientWidth * 0.98 ;
        let pageHeight = document.documentElement.clientHeight * 0.5;
        canvas.width = pageWidth;
        canvas.height = pageHeight;
        console.log("画布大小：" + pageWidth + "," + pageHeight);
    }

    // 显示自己发送的消息到页面上
    function showMessageInnerHtml(){
        var input_msg = document.getElementById("text-msg");
        if (input_msg.value == null || input_msg.value == '' ){
            return ;
        }
        var show_area = document.getElementById("box-chat-area");
        var box_msg = document.createElement('div');
        box_msg.className = 'box-chat-message';
        box_msg.innerHTML = input_msg.value;
        show_area.appendChild(box_msg);
        input_msg.value = '';
        scrollBottom();
    }

    // 显示收到的发送的消息到页面上
    function receiveMessageInnerHtml(userId, msg){
        var show_area = document.getElementById("box-chat-area");
        var box_msg = document.createElement('div');
        box_msg.className = 'box-chat-message-right';
        box_msg.innerHTML = userId + ": " + msg;
        show_area.appendChild(box_msg);
        scrollBottom();
    }

    // 滚动条自动下移到最底部
    function scrollBottom(){
        var div = document.getElementById("box-chat-area");
        div.scrollTop = div.scrollHeight;
    }

</script>
</html>